<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row class="ml10"
              v-show="showSearch">
        <el-form :inline="true"
                 :model="state.queryForm"
                 @keyup.enter="getDataList"
                 ref="queryRef">
          <el-form-item label="数据集名称"
                        prop="name">
            <el-input placeholder="请输入数据集名称"
                      v-model="state.queryForm.name" />
          </el-form-item>

          <el-form-item>
            <el-button @click="getDataList"
                       icon="Search"
                       type="primary">查询</el-button>
            <el-button @click="resetQuery"
                       icon="Refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <div class="mb8"
             style="width: 100%">
          <button style="width: 102px;height: 32px; border: 1px solid #409EFF; color:#409EFF"
                  @click="dropdownOpen = !dropdownOpen">新建</button>
          <div v-if="dropdownOpen"
               class="dropdown">
            <ul>
              <li @click="formDialogRef.openDialog(state.queryForm.tmbId)">手动数据集</li>
              <li @click="formtextDialogRef.openDialog(state.queryForm.tmbId)">文本数据集</li>
              <li @click="formbgDialogRef.openDialog(state.queryForm.tmbId)">表格数据集</li>
            </ul>
          </div>

          <right-toolbar v-model:showSearch="showSearch"
                         :export="'model_modelSort_export'"
                         @exportExcel="exportExcel"
                         class="ml10 mr20"
                         style="float: right;"
                         @queryTable="getDataList"></right-toolbar>
        </div>
      </el-row>
      <el-table :data="state.dataList"
                @selection-change="handleSelectionChange"
                v-loading="state.loading"
                border
                :cell-style="tableStyle.cellStyle"
                :header-cell-style="tableStyle.headerCellStyle">
        <el-table-column align="center"
                         type="selection"
                         width="40" />
        <el-table-column label="#"
                         type="index"
                         width="60" />
        <el-table-column label="名称"
                         prop="name"
                         show-overflow-tooltip>
          <template #default="scope">
            <a style="color: #7099F9"
               @click="openGen(scope.row._id, scope.row.name)">{{scope.row.name}} </a>
          </template>
        </el-table-column>
        <el-table-column label="数据总量"
                         prop="dataAmount"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="最后更新时间"
                         prop="updateTime"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="状态"
                         prop="ipCount"
                         show-overflow-tooltip>
          <template #default="scope">
            <el-tag v-if="scope.row.type">已就绪</el-tag>
            <el-tag type="info"
                    v-else>未就绪</el-tag>
          </template></el-table-column>
      </el-table>

      <pagination @current-change="currentChangeHandle"
                  @size-change="sizeChangeHandle"
                  v-bind="state.pagination"> </pagination>

    </div>
    <!-- 编辑、新增  -->
    <form-dialog ref="formDialogRef"
                 @refresh="getDataList(false)" />
    <formbg-dialog ref="formbgDialogRef"
                   @refresh="getDataList(false)" />
    <formtext-dialog ref="formtextDialogRef"
                     @refresh="getDataList(false)" />
  </div>
</template>

<script lang="ts" setup>
import { BasicTableProps, useTable } from '/@/hooks/tableSort';
import { pageList } from '/@/api/know/zhishiku';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useDict } from '/@/hooks/dict';
import { useRoute } from 'vue-router';

const FormDialog = defineAsyncComponent(() => import('./sdform.vue'));
const FormbgDialog = defineAsyncComponent(() => import('./bgform.vue'));
const FormtextDialog = defineAsyncComponent(() => import('./textform.vue'));

const serviceDetailRef = ref();

const { service_type } = useDict('service_type');
const dataForm1 = reactive({
	zskid: '',
	zskName: '',
	dropdownVisible: false,
});

const dropdownOpen = ref(false);

const route = useRoute();

dataForm1.zskid = route.query.zskid;
dataForm1.zskName = route.query.zskName;

// 定义变量内容
const queryRef = ref();
const formDialogRef = ref();
const formbgDialogRef = ref();
const formtextDialogRef = ref();
const showSearch = ref(true);
const router = useRouter();

// 多选rows
const selectObjs = ref([]) as any;
// 是否可以多选
const multiple = ref(true);

console.log('111:' + dataForm1.zskid);
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		tmbId: dataForm1.zskid,
	},
	pageList: pageList,
});
//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	queryRef.value?.resetFields();
	getDataList();
};

const openGen = (id, name) => {
	router.push(
		{
			path: '/know/zhishiku/datasetindex',
			query: {
				sjjid: id,
				sjjName: name,
			},
		},
		() => {
			window.open('/know/zhishiku/datasetindex', '_blank');
		}
	);
};

// 多选事件
const handleSelectionChange = (objs: { id: string }[]) => {
	selectObjs.value = objs.map(({ id }) => id);
	multiple.value = !objs.length;
};
</script>

<style lang="scss" scoped>
pre code.hljs {
	width: 65%;
}
.dropdown {
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 10;
}

.dropdown ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	background: #ffffff;
	border: 1px solid #e4e7ed;
}

.dropdown ul li {
	padding: 5px 10px;
	cursor: pointer;
}

.dropdown ul li:hover {
	background-color: #ddd;
}
</style>
